<template>
	<!-- 充值页面容器 -->
	<view class="container">
		<block v-if="isload">
			<!-- 顶部余额显示区域 -->
			<view class="mymoney" :style="{ background: t('color1') }">
				<view class="f1">我的{{ t('余额') }}</view>
				<view class="f2" style="display: flex;align-items: center;">
					<text style="font-size:26rpx">￥</text>{{ userinfo.money }}
					<!-- 提现按钮,仅在允许提现时显示 -->
					<view class="withdrawop" v-if="canwithdraw">
						<view class="btn" @tap="goto" data-url="withdraw">提现</view>
					</view>
				</view>
				<!-- 累计充值和消费统计 -->
				<view class="f4">
					<view class="f5" v-if="canrecharge">
						<view>累计充值(元)</view>
						<view class="totalmoney">0.00</view>
					</view>
					<view class="f5">
						<view>累计消费(元)</view>
						<view class="totalmoney">{{ countpay }}</view>
					</view>
				</view>
			</view>

			<!-- 账户明细和充值记录入口 -->
			<view class="money-items">
				<view class="money-item" @tap="goto" data-url="/pages/money/moneylog?st=0">
					<image :src="static_url + '/static/img/moneylog.png'"></image>
					账户明细
				</view>
				<view v-if="canrecharge" class="money-item" @tap="goto" data-url="/pages/money/moneylog?st=1">
					<image :src="static_url + '/static/img/rechargelog.png'"></image>
					充值记录
				</view>
			</view>

			<!-- 充值金额输入区域 -->
			<view class="content2" v-if="canrecharge">
				<view class="item2">
					<view class="f1">充值金额(元)</view>
				</view>
				<!-- 自定义金额输入框,仅在允许自定义输入时显示 -->
				<block v-if="caninput == 1">
					<view class="item3">
						<view class="f1">￥</view>
						<view class="f2"><input type="digit" name="money" :value="money" placeholder="请输入充值金额"
								placeholder-style="color:#999;font-size:40rpx" @input="moneyinput"
								style="font-size:60rpx" /></view>
					</view>
				</block>
				<!-- 充值金额档位选择,包含赠送规则 -->
				<view class="giveset" v-if="giveset.length > 0">
					<view v-for="(item, index) in giveset" :key="index" class="item"
						:class="moneyduan == item.money ? 'active' : ''"
						:style="moneyduan == item.money ? 'background:' + t('color1') : ''" @tap="selectgiveset"
						:data-money="item.money">
						<text class="t1">{{ caninput == 1 ? '满' : '充' }}{{ item.money }}元</text>
						<text class="t2" v-if="item.give && item.give_score">赠{{ item.give }}元+{{ item.give_score }}{{
							t('积分') }}</text>
						<text class="t2" v-else-if="item.give && !item.give_score">赠送{{ item.give }}元</text>
						<text class="t2" v-else-if="!item.give && item.give_score">赠送{{ item.give_score }}{{ t('积分')
						}}</text>
					</view>
				</view>
				<!-- 充值说明 -->
				<view style="margin-top:40rpx;padding:0 30rpx;line-height:42rpx;" v-if="shuoming">
					<parse :content="shuoming" @navigate="navigate"></parse>
				</view>
			</view>

			<!-- 支付按钮 -->
			<view class="op" v-if="canrecharge">
				<view class="btn" @tap="topay" :style="{ background: t('color1') }">去支付</view>
			</view>

			<!--<view class="op" v-if="transfer">
				<view class="btn" @tap="goto" data-url="rechargeToMember" :style="{background:t('color2')}">转账</view>
			</view>-->
		</block>
		<!-- 加载中状态 -->
		<loading v-if="loading"></loading>
		<!-- 底部导航栏 -->
		<dp-tabbar :opt="opt"></dp-tabbar>
		<!-- 消息弹窗组件 -->
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
var app = getApp();

export default {
	data() {
		return {
			opt: {}, // 页面参数
			loading: false, // 加载状态
			isload: false, // 是否已加载完成
			menuindex: -1, // 菜单索引

			textset: {}, // 文本配置
			canrecharge: 0, // 是否允许充值
			userinfo: {}, // 用户信息
			giveset: [], // 充值赠送规则配置
			shuoming: '', // 充值说明
			money: '', // 充值金额
			moneyduan: 0, // 当前选中的充值档位
			give_coupon_list: "", // 赠送优惠券列表
			give_coupon_show: false, // 是否显示赠送优惠券
			give_coupon_close_url: "", // 优惠券关闭跳转链接
			caninput: 1, // 是否允许自定义输入金额
			transfer: false, // 是否允许转账
			canwithdraw: false, // 是否允许提现
			countpay: 0.00, // 累计消费金额
			pre_url: app.globalData.pre_url, static_url: app.globalData.static_url,
		};
	},

	// 页面加载
	onLoad: function (opt) {
		this.opt = app.getopts(opt); // 获取页面参数
		this.getdata(); // 获取页面数据
	},

	// 下拉刷新
	onPullDownRefresh: function () {
		this.getdata();
	},

	methods: {
		// 获取页面数据
		getdata: function () {
			var that = this;
			app.loading = true;
			app.get('Money/recharge', {}, function (res) {
				app.loading = false;
				if (res.canrecharge == 0) {
					//app.goto('moneylog?st=0', 'redirect');
					//return;
				}
				that.isload = true;
				that.textset = app.globalData.textset;
				// 设置页面标题
				uni.setNavigationBarTitle({
					title: that.t('余额') + '充值'
				});
				// 设置各项数据
				that.canrecharge = res.canrecharge;
				that.canwithdraw = res.canwithdraw;
				that.giveset = res.giveset;
				that.caninput = res.caninput;
				that.shuoming = res.shuoming;
				that.userinfo = res.userinfo;
				that.transfer = res.transfer;
				that.countpay = res.countpay;
				that.loaded();
			});
		},

		// 监听充值金额输入
		moneyinput: function (e) {
			var money = e.detail.value;
			var giveset = this.giveset;

			if (parseFloat(money) < 0) {
				app.error('必须大于0');
			} else {
				// 计算当前金额对应的赠送档位
				var moneyduan = 0;
				if (giveset.length > 0) {
					for (var i in giveset) {
						if (money * 1 >= giveset[i]['money'] * 1 && giveset[i]['money'] * 1 > moneyduan) {
							moneyduan = giveset[i]['money'] * 1;
						}
					}
				}
				this.money = money;
				this.moneyduan = moneyduan;
			}
		},

		// 选择充值档位
		selectgiveset: function (e) {
			var money = e.currentTarget.dataset.money;
			this.money = money;
			this.moneyduan = money;
		},

		// 发起支付
		topay: function (e) {
			var that = this;
			var money = that.money;
			var paytype = e.currentTarget.dataset.paytype;
			that.loading = true;
			// 创建充值订单
			app.post('Money/recharge', {
				money: money
			}, function (res) {
				that.loading = false;
				if (res.status == 0) {
					app.error(res.msg);
					return;
				}
				// 跳转到支付页面
				app.goto('/pages/pay/pay?id=' + res.payorderid);
			});
		}
	}
};
</script>
<style>
.container {
	display: flex;
	flex-direction: column
}

.mymoney {
	width: 94%;
	margin: 20rpx 3%;
	border-radius: 20rpx;
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 70rpx 0
}

.mymoney .f1 {
	margin: 0 0 0 60rpx;
	color: rgba(255, 255, 255, 0.8);
	font-size: 24rpx;
}

.mymoney .f2 {
	margin: 20rpx 0 0 60rpx;
	color: #fff;
	font-size: 64rpx;
	font-weight: bold
}

.mymoney .f3 {
	height: 56rpx;
	padding: 0 10rpx 0 20rpx;
	border-radius: 28rpx 0px 0px 28rpx;
	background: rgba(255, 255, 255, 0.2);
	font-size: 20rpx;
	font-weight: bold;
	color: #fff;
	display: flex;
	align-items: center;
	position: absolute;
	top: 94rpx;
	right: 0
}

.content2 {
	width: 94%;
	margin: 0rpx 3%;
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	background: #fff
}

.content2 .item1 {
	display: flex;
	width: 100%;
	border-bottom: 1px solid #F0F0F0;
	padding: 0 30rpx
}

.content2 .item1 .f1 {
	flex: 1;
	font-size: 32rpx;
	color: #333333;
	font-weight: bold;
	height: 120rpx;
	line-height: 120rpx
}

.content2 .item1 .f2 {
	color: #FC4343;
	font-size: 44rpx;
	font-weight: bold;
	height: 120rpx;
	line-height: 120rpx
}

.content2 .item2 {
	display: flex;
	width: 100%;
	padding: 0 30rpx
}

.content2 .item2 .f1 {
	height: 120rpx;
	line-height: 120rpx;
	color: #999999;
	font-size: 28rpx
}

.content2 .item3 {
	display: flex;
	width: 100%;
	padding: 0 30rpx;
	border-bottom: 1px solid #F0F0F0;
}

.content2 .item3 .f1 {
	height: 120rpx;
	line-height: 120rpx;
	font-size: 60rpx;
	color: #333333;
	font-weight: bold;
	margin-right: 20rpx
}

.content2 .item3 .f2 {
	display: flex;
	align-items: center;
	font-size: 60rpx;
	color: #333333;
	font-weight: bold
}

.content2 .item3 .f2 input {
	height: 120rpx;
	line-height: 120rpx;
}

.op {
	width: 96%;
	margin: 20rpx 2%;
	display: flex;
	align-items: center;
	margin-top: 40rpx
}

.op .btn {
	flex: 1;
	height: 100rpx;
	line-height: 100rpx;
	background: #07C160;
	width: 90%;
	margin: 0 10rpx;
	border-radius: 10rpx;
	color: #fff;
	font-size: 28rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center
}

.op .btn .img {
	width: 48rpx;
	height: 48rpx;
	margin-right: 20rpx
}

.giveset {
	width: 100%;
	padding: 20rpx 0rpx;
	display: flex;
	flex-wrap: wrap;
	justify-content: center
}

.giveset .item {
	margin: 10rpx;
	padding: 15rpx 0;
	width: 210rpx;
	height: 120rpx;
	background: #FDF6F6;
	border-radius: 10rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center
}

.giveset .item .t1 {
	color: #545454;
	font-size: 32rpx;
}

.giveset .item .t2 {
	color: #8C8C8C;
	font-size: 20rpx;
	margin-top: 6rpx
}

.giveset .item.active .t1 {
	color: #fff;
	font-size: 32rpx
}

.giveset .item.active .t2 {
	color: #fff;
	font-size: 20rpx
}

.money-items {
	display: flex;
	align-items: center;
	/* margin: auto; */
	text-align: center;
	background: #fff;
	margin: 20rpx 3% 0rpx 3%;
	border-radius: 10rpx;
	padding: 20rpx 0rpx;
}

.money-items .money-item {
	display: grid;
	text-align: center;
	margin: auto;
	align-items: baseline;
	align-content: space-between;
}

.money-items .money-item image {
	width: 60rpx;
	height: 60rpx;
	margin: auto;
}

.f4 {
	display: flex;
	justify-content: space-between;
	/* margin: 20rpx 6%; */
	margin: 60rpx 60rpx 0 60rpx;
	text-align: center;
	color: #fff;
}

.totalmoney {
	font-size: 32rpx;
	font-weight: bold;
	margin-top: 12rpx;
}

.withdrawop .btn {
	font-size: 24rpx;
	background: rgba(255, 255, 255, 0.4);
	padding: 10rpx 18rpx;
	border-radius: 12rpx;
	color: #fff;
	margin-left: 24rpx;
}
</style>